<template>
  <div class="medov-rank2-container">
    <el-row
      class="rank-item animate__animated animate__bounceInLeft"
      :style="{ '--borderColor': numColor, animationDelay: `${(index + 1) * 0.3}s` }"
      v-for="(ele, index) in rankList"
      :key="index"
      :gutter="10"
    >
      <el-col :span="3">
        <div class="rank-num">NO.{{ index + 1 }}</div>
      </el-col>
      <el-col :span="21">
        <div class="rank-item-title">{{ ele.titleName }}</div>
        <div class="rank-item-bar-box">
          <div :style="{ width: `${ele.percent}%` }">
            <div
              class="rank-item-bar"
              :style="{
                background: `linear-gradient(to right, ${hexToRgba(
                  ele.color1,
                  0
                )}, ${hexToRgba(ele.color1, ele.color1Opacity)},  ${hexToRgba(
                  ele.color2,
                  ele.color2Opacity
                )})`,
                boxShadow: `5px 0 2px 0 ${hexToRgba(ele.color2, 0.3)}`,
                width: '100%',
              }"
            ></div>
          </div>
          <div style="margin-left: 10px; width: 80px">
            {{ ele.num }}
            {{ ele.unit }}
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { sortBy, cloneDeep } from "lodash";

// 定义 props
const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      width: 400,
      height: 150,
      numColor: "#409EFF",
      data: [],
    }),
  },
});

// 响应式状态
const width = ref(400);
const height = ref(150);
const numColor = ref("#409EFF");
const rankList = ref([]);

// 色值转换函数
const hexToRgba = (hex, opacity) => {
  let rgbaColor = "";
  let reg = /^#[\da-f]{6}$/i;
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
      "0x" + hex.slice(3, 5)
    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
  } else {
    rgbaColor = hex;
  }
  return rgbaColor;
};

// 监听 options 变化
watch(
  () => props.options,
  (value) => {
    if (value.width) {
      width.value = value.width;
    }
    if (value.height) {
      height.value = value.height;
    }
    if (value.numColor) {
      numColor.value = value.numColor;
    }
    if (value.data && value.data.length > 0) {
      let arr = cloneDeep(value.data);
      if (arr && arr.length > 0) {
        arr = sortBy(arr, (o) => -o.num);
        const first = arr[0];
        arr.map((ele) => {
          ele.percent = (ele.num / first.num).toFixed(2) * 100;
        });
      }
      rankList.value = arr;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style scoped lang="less">
.medov-rank2-container {
  width: 100%;
  .rank-item {
    height: 35px;
    line-height: 35px;
    color: #fff;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-bottom: 12px;
  }
  .rank-num {
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    background: linear-gradient(to left, var(--borderColor), var(--borderColor)) left top
        no-repeat,
      linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left top
        no-repeat,
      linear-gradient(to left, var(--borderColor), var(--borderColor)) right top no-repeat,
      linear-gradient(to bottom, var(--borderColor), var(--borderColor)) right top
        no-repeat,
      linear-gradient(to left, var(--borderColor), var(--borderColor)) left bottom
        no-repeat,
      linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left bottom
        no-repeat,
      linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom
        no-repeat,
      linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom
        no-repeat;
    background-size: 1.5px 8px, 8px 1.5px, 1.5px 8px, 8px 1.5px;
    transition: all 0.4s ease;
    border: 1px solid transparent;
  }

  .rank-item-bar-box {
    width: 100%;
    line-height: 15px;
    display: flex;
  }

  .rank-item-title {
    height: 15px;
    line-height: 15px;
    margin-bottom: 2px;
  }
  .rank-item-bar {
    height: 18px;
    border-radius: 9px;
  }
}
</style>
